<template>
  <div class="menu-item" @click="handleClick">
    <image
      class="icon"
      :src="iconPath"
      mode=""
    />
    <span class="name">{{ menu.formName }}</span>
  </div>
</template>

<script>
import { getAccessToken } from '@/utils/storage.js'

export default {
  name: 'OfficeMenuItem',
  props: {
    menu: {
      type: Object,
      default: () => ({}),
    },
    current: {
      type: Number,
    },
  },
  computed: {
    iconPath() {
      const defaultIcon = 'https://oa.zeweb.org.cn/api/admin/sys-file/zeoa/4abb405851ce45ccae7951fdc8f27038.png'
      try {
        const url = JSON.parse(this.menu.logo).icon
        if (url.startsWith('/admin/sys-file')) {
          return `${this.$env.FILE_BASE_URL}${url}`
        }
        return defaultIcon
      } catch {
        return defaultIcon
      }
    },
  },
  methods: {
    handleClick() {
      if (this.current === 0) {
        uni.navigateTo({
          url: `/pages/webview/index?link=${encodeURIComponent(
            `${this.$env.WEBVIEW_URL}/mbinitiate?code=${
              this.menu.formId
            }&token=${getAccessToken()}&page='common-used'`,
          )}`,
        })
      } else if (this.current === 1) {
        uni.navigateTo({
          url: '/pages/customer-infor/index/index',
        })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.menu-item {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 4px;

  .icon {
    width: 38px;
    height: 38px;
    border-radius: 4px;
  }

  .name {
    margin-top: 6px;
    font-size: 13px;
    color: #000;
  }
}
</style>
